﻿class SolarApp {
    public static main(): void {
        var sun = new Image();
        var moon = new Image();
        var earth = new Image();

        function init() {
            sun.src = 'solar/Canvas_sun.png';
            moon.src = 'solar/Canvas_moon.png';
            earth.src = 'solar/Canvas_earth.png';
            requestAnimationFrame(draw);

            //setTimeout(draw, 15);
        }

        function draw() {
            var ctx = (<HTMLCanvasElement>document.getElementById('canvas')).getContext('2d');

            ctx.globalCompositeOperation = 'destination-over';
            ctx.clearRect(0, 0, 300, 300); // clear canvas

            ctx.fillStyle = 'rgba(0,0,0,0.4)';
            ctx.strokeStyle = 'rgba(0,153,255,0.4)';
            ctx.save();
            ctx.translate(150, 150);

            // Earth
            var time = new Date();
            ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
            ctx.translate(105, 0);
            ctx.fillRect(0, -12, 50, 24); // Shadow
            ctx.drawImage(earth, -12, -12);

            // Moon
            ctx.save();
            ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
            ctx.translate(0, 28.5);
            ctx.drawImage(moon, -3.5, -3.5);
            ctx.restore();

            ctx.restore();

            ctx.beginPath();
            ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
            ctx.stroke();

            ctx.drawImage(sun, 0, 0, 300, 300);

            requestAnimationFrame(draw);
            //setTimeout(draw, 15);
        }

        init();
    }
}
SolarApp.main();